<template>
    <div class="app-container">
        <el-button-group style="margin-top: 10px; margin-left: 10px;">
            <el-button @click="dialogVisible = true">导入</el-button>
            <el-button @click="callChildMethod">导出</el-button>
            <el-button @click="saveXml">保存</el-button>
            <el-button @click="back">返回</el-button>
        </el-button-group>
        <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
            <el-form :model="form">
                <el-form-item label="xml">
                    <el-input v-model="form.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="importxml()">
                        Confirm
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <designer ref="childRef" />

    </div>
</template>
<script setup>
import { ref } from 'vue'
import designer from '@/components/designer/index.vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter() // 获取 router 实例
// 创建子组件的 ref
const childRef = ref(null)

const dialogVisible = ref(false)
const form = ref({})

const handleClose = () => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}

const importxml = () => {
    console.log(form.value.name)
    childRef.value.initNewDiagram(form.value.name)
    dialogVisible.value = false
}


// 调用子组件方法
const callChildMethod = () => {
    if (childRef.value) {
        childRef.value.exportBpmn()
    }
}

const saveXml = () => {
    if (childRef.value) {
        childRef.value.saveProcessDefine();
    }
}

const back = () => {
    router.push("/bpmn/processdefineManage")
}
</script>
